/*
Theme Name: VRTours Plus
Description: 自社サイト用バーチャルツアー構築ツール LPテーマ
Version: 1.0
Author: 仲介王
*/

/* ここから下に、元のHTML内にあった <style> タグの中身を貼り付けます。
   HTML内の <style>...</style> という記述自体は不要です。
*/

body { font-family: 'Noto Sans JP', sans-serif; overflow-x: hidden; }
.animate-spin-slow { animation: spin 15s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.hidden { display: none; }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.active .faq-content { max-height: 500px; }
.faq-item.active .faq-icon { transform: rotate(90deg); background-color: #2563eb; color: white; border-color: #2563eb; }

/* ヒーロータイトルのレスポンシブ調整 */
.hero-title { line-height: 1.25; word-break: keep-all; }
.hero-phrase { display: inline-block; white-space: nowrap; }
@media (min-width: 1280px) { .hero-title { font-size: 4rem; } }
@media (max-width: 1279px) and (min-width: 1024px) { .hero-title { font-size: 3.25rem; } }
@media (max-width: 1023px) and (min-width: 640px) { .hero-title { font-size: 2.75rem; } }
@media (max-width: 639px) { .hero-title { font-size: 1.8rem; } }

/* ローディングボックス全体（テキストとインジケーター）を非表示にする */
.pnlm-load-box {
    display: none !important;
}

#scene-thumb-container {
    display: flex;
    overflow-x: auto; /* 横スクロールを許可 */
    gap: 10px;        /* サムネイル同士の間隔 */
    padding: 10px 0;
    scrollbar-width: thin; /* スクロールバーを細めに（Firefox） */
}

.scene-item {
    flex: 0 0 100px;  /* 幅を100pxに固定 */
    cursor: pointer;
    text-align: center;
}

.scene-item img {
    width: 100px;
    height: 60px;
    object-fit: cover; /* 360度画像の中央をサムネイルとして表示 */
    border-radius: 4px;
    border: 2px solid transparent;
    transition: border 0.2s;
}

.scene-item:hover img {
    border-color: #007bff; /* ホバー時に青枠 */
}

.scene-item span {
    display: block;
    font-size: 10px;   /* 小さく配置 */
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 文字が長い場合は「...」にする */
}

/* アクティブなサムネイルのスタイル */
.scene-item.is-active img {
    border-color: #ff5722; /* 目立つ色（オレンジなど）に変更 */
    border-width: 3px;
    box-shadow: 0 0 8px rgba(255, 87, 34, 0.5);
}

.scene-item.is-active span {
    color: #ff5722;
    font-weight: bold;
}