/* =========================================================
   Custom 360 Tour — frontend
   ========================================================= */
.c360 {
	--c360-accent: #1735ad;
	--c360-accent-2: #3f63ff;
	--c360-spot-bg: var(--c360-accent);
	--c360-line: var(--c360-accent);
	--c360-ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
	max-width: 1100px;
	margin: 0 auto 2em;
}

/* ---------- 間取り図 ---------- */
.c360-map {
	position: relative;
	width: 100%;
	container-type: inline-size;
	container-name: c360map;
	line-height: 0;
}

.c360-map__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: fill;
	margin: 0 !important;
}

.c360-map__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.c360-line polyline {
	fill: none;
	stroke: var(--c360-line);
	stroke-width: 2.6;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-width .3s var(--c360-ease), stroke .3s;
}

.c360-line__dot {
	fill: var(--c360-line);
	stroke: #fff;
	stroke-width: 2;
	transition: r .3s var(--c360-ease);
}

.c360-line__pulse {
	fill: var(--c360-accent-2);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

/* スクロールで表示されたら線が伸びるアニメーション */
.c360.is-pending .c360-line polyline { stroke-dashoffset: 1; }
.c360.is-pending .c360-line__dot { r: 0; }
.c360.is-visible .c360-line polyline { transition: stroke-dashoffset 1.1s var(--c360-ease); }
.c360.is-visible .c360-line:nth-child(2) polyline { transition-delay: .08s; }
.c360.is-visible .c360-line:nth-child(3) polyline { transition-delay: .16s; }
.c360.is-visible .c360-line:nth-child(4) polyline { transition-delay: .24s; }
.c360.is-visible .c360-line:nth-child(5) polyline { transition-delay: .32s; }
.c360.is-visible .c360-line__dot { transition: r .5s var(--c360-ease) .9s; }

.c360-line.is-active polyline { stroke-width: 4.5; stroke: var(--c360-accent-2); }
.c360-line.is-active .c360-line__dot { fill: var(--c360-accent-2); r: 8; }
.c360-line.is-active .c360-line__pulse { animation: c360-pulse 1.4s var(--c360-ease) infinite; }

@keyframes c360-pulse {
	0%   { opacity: .55; transform: scale(1); }
	100% { opacity: 0;   transform: scale(3.2); }
}

/* カメラアイコン（ラベル） */
.c360-spot {
	position: absolute;
	z-index: 2;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin: 0;
	padding: .38em 1.05em .38em .8em;
	border: 0;
	border-radius: 999px;
	background: var(--c360-spot-bg);
	color: #fff;
	font-weight: 600;
	font-size: clamp(10px, 1.6cqw, 17px);
	line-height: 1.2;
	font-family: inherit;
	letter-spacing: .06em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(13, 30, 110, .28);
	transition: transform .35s var(--c360-ease), box-shadow .35s var(--c360-ease), background .35s;
	-webkit-tap-highlight-color: transparent;
}

.c360-spot::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	border: 2px solid var(--c360-accent-2);
	opacity: 0;
	transform: scale(.9);
	transition: opacity .35s, transform .35s var(--c360-ease);
	pointer-events: none;
}

.c360-spot:hover,
.c360-spot:focus-visible,
.c360-spot.is-active {
	transform: translate(-50%, -50%) translateY(-2px) scale(1.06);
	background: var(--c360-accent-2);
	box-shadow: 0 10px 24px rgba(23, 53, 173, .38);
	outline: none;
}

.c360-spot:hover::after,
.c360-spot:focus-visible::after,
.c360-spot.is-active::after {
	opacity: 1;
	transform: scale(1);
}

.c360-spot__icon {
	display: inline-flex;
	width: 1.2em;
	height: 1.2em;
	flex: none;
}

.c360-spot__icon svg { width: 100%; height: 100%; }
.c360-spot:hover .c360-spot__icon circle,
.c360-spot.is-active .c360-spot__icon circle { stroke: var(--c360-accent-2); }

.c360-spot:hover .c360-spot__icon { animation: c360-shutter .5s var(--c360-ease); }

@keyframes c360-shutter {
	40% { transform: scale(.82); }
	100% { transform: scale(1); }
}

/* スマホ一覧（狭い画面のみ表示） */
.c360-chips {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 30px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.c360-chips li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.c360-chips li::before { display: none !important; }

.c360-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px 9px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--c360-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(13, 30, 110, .25);
	transition: background .3s, transform .3s var(--c360-ease);
}

.c360-chip:hover, .c360-chip:focus-visible { background: var(--c360-accent-2); transform: translateY(-1px); outline: none; }
.c360-chip__icon { display: inline-flex; width: 18px; height: 18px; }
.c360-chip__icon svg { width: 100%; height: 100%; }

/* 間取り図が狭い場合：アイコンのみの丸ボタン＋下に一覧 */
@container c360map (max-width: 640px) {
	.c360-spot {
		padding: 0;
		width: max(26px, 5.2cqw);
		height: max(26px, 5.2cqw);
		justify-content: center;
		font-size: max(13px, 2.6cqw);
	}
	.c360-spot__label {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.c360-line polyline { stroke-width: 3.6; }
}

@media (max-width: 680px) {
	.c360-chips { display: flex; }
}

.c360-error {
	padding: 10px 14px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	font-size: 14px;
}

/* =========================================================
   モーダル
   ========================================================= */
.c360-modal {
	--c360-accent: #1735ad;
	--c360-accent-2: #3f63ff;
	--c360-glass: rgba(14, 18, 32, .72);
	--c360-glass-border: rgba(255, 255, 255, .14);
	--c360-ease: cubic-bezier(.22, 1, .36, 1);
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	background: #06080f;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s var(--c360-ease), visibility 0s linear .45s;
	font-family: inherit;
	color: #fff;
}

.c360-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s var(--c360-ease), visibility 0s;
}

.c360-modal__stage {
	position: relative;
	flex: 1;
	margin: 0;
	overflow: hidden;
	background: #000;
	transform: scale(.97);
	transition: transform .6s var(--c360-ease);
}

.c360-modal.is-open .c360-modal__stage { transform: none; }

.c360-modal__viewer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s var(--c360-ease);
}

.c360-modal.is-ready .c360-modal__viewer { opacity: 1; }

/* ヘッダー */
.c360-modal__head {
	position: absolute;
	top: max(16px, env(safe-area-inset-top));
	left: 16px;
	right: 16px;
	z-index: 20;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	pointer-events: none;
}

.c360-modal__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 18px 11px;
	border: 1px solid var(--c360-glass-border);
	border-radius: 16px;
	background: var(--c360-glass);
	pointer-events: auto;
	max-width: min(70vw, 520px);
}

.c360-modal__tour {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .65;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.c360-modal__scene {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.3;
}

.c360-modal__scene.is-changing { animation: c360-title .6s var(--c360-ease); }

@keyframes c360-title {
	0% { opacity: 0; transform: translateY(6px); }
	100% { opacity: 1; transform: none; }
}

.c360-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--c360-glass-border);
	border-radius: 50%;
	background: var(--c360-glass);
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	transition: background .3s, transform .3s var(--c360-ease);
}

.c360-btn:hover, .c360-btn:focus-visible { background: rgba(255, 255, 255, .22); transform: rotate(90deg); outline: none; }
.c360-btn svg { width: 20px; height: 20px; }

/* ローダー */
.c360-modal__loader {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	pointer-events: none;
	transition: opacity .4s;
}

.c360-modal.is-ready .c360-modal__loader { opacity: 0; }

.c360-spinner {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .15);
	border-top-color: #fff;
	animation: c360-spin .9s linear infinite;
}

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

/* 部屋一覧ドロワー */
.c360-rooms {
	position: absolute;
	left: 50%;
	bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px);
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: max-content;
	max-width: calc(100% - 32px);
	padding: 10px;
	border: 1px solid var(--c360-glass-border);
	border-radius: 18px;
	background: var(--c360-glass);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity .35s var(--c360-ease), transform .35s var(--c360-ease), visibility 0s linear .35s;
	scrollbar-width: thin;
}

.c360-rooms.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .35s var(--c360-ease), transform .35s var(--c360-ease), visibility 0s;
}

.c360-rooms__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.c360-rooms__tab {
	padding: 5px 14px;
	border: 1px solid var(--c360-glass-border);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	cursor: pointer;
	transition: background .25s;
}
.c360-rooms__tab:hover { background: rgba(255, 255, 255, .14); }
.c360-rooms__tab.is-active { background: #fff; color: #0e1220; }
.c360-rooms__list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.c360-room[hidden] { display: none; }

.c360-room {
	position: relative;
	flex: none;
	width: 128px;
	height: 80px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	overflow: hidden;
	background: #222 center / cover no-repeat;
	color: #fff;
	cursor: pointer;
	transition: border-color .3s, transform .3s var(--c360-ease);
}

.c360-room::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 65%);
}

.c360-room span {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.c360-room:hover { transform: translateY(-2px); }
.c360-room.is-current { border-color: #fff; }

/* =========================================================
   Photo Sphere Viewer — ナビバーをフローティングのガラスピルに
   ========================================================= */
.c360-modal .psv-container { background: #000; font-family: inherit; }

.c360-modal .psv-navbar {
	left: 50%;
	right: auto;
	bottom: max(16px, env(safe-area-inset-bottom));
	width: auto;
	max-width: calc(100% - 32px);
	box-sizing: border-box;
	align-items: center;
	height: 52px;
	padding: 0 8px;
	border: 1px solid var(--c360-glass-border);
	border-radius: 999px;
	background: var(--c360-glass);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transform: translateX(-50%);
	transition: opacity .3s, transform .3s var(--c360-ease);
}

.c360-modal .psv-navbar:not(.psv-navbar--open) { transform: translate(-50%, 120%); opacity: 0; }

.c360-modal .psv-button:not(.psv-zoom-range) {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 10px;
	margin: 0 1px;
	border-radius: 50%;
	color: rgba(255, 255, 255, .9);
	transition: background .25s, color .25s;
}

.c360-modal .psv-button:not(.psv-zoom-range):hover,
.c360-modal .psv-button--active {
	background: rgba(255, 255, 255, .16);
	transform: none;
}

.c360-modal .psv-button-svg { transform: none !important; }
.c360-modal .psv-zoom-range.psv-button {
	width: 76px;
	height: 2px;
	margin: 0 6px;
	padding: 0;
	align-self: center;
	border-radius: 0;
	background: none;
}
.c360-modal .psv-zoom-range-line { width: 76px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.c360-modal .psv-zoom-range-handle { top: -5px; width: 12px; height: 12px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
@media (max-width: 600px) {
	.c360-modal .psv-zoom-range.psv-button { display: none; }
}
.c360-modal .psv-caption { display: none; }
.c360-modal .psv-loader-container { display: none; }
.c360-modal .psv-notification-content { border-radius: 999px; background: var(--c360-glass); }

.c360-modal .c360-nav-sep {
	width: 1px;
	height: 22px;
	margin: 0 6px;
	align-self: center;
	background: rgba(255, 255, 255, .2);
	pointer-events: none;
}

/* =========================================================
   ホットスポット（部屋移動）
   ========================================================= */
.c360-hotspot {
	position: relative;
	width: 72px;
	height: 72px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.c360-hotspot__ring {
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: rgba(20, 28, 60, .38);
	border: 2px solid rgba(255, 255, 255, .92);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(255, 255, 255, .08);
	transition: transform .45s var(--c360-ease), background .35s, border-color .35s;
}

/* 波紋はホバー時のみ（常時アニメーションは描画負荷になるため） */
.c360-hotspot__ring::before,
.c360-hotspot__ring::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .7);
	opacity: 0;
}

.c360-hotspot__ring::after { animation-delay: .6s; }

@keyframes c360-ripple {
	0%   { transform: scale(1);   opacity: .8; }
	100% { transform: scale(1.9); opacity: 0; }
}

.c360-hotspot__arrow {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
	transition: transform .45s var(--c360-ease);
}

.c360-hotspot__arrow svg { width: 30px; height: 30px; }

.c360-hotspot__label {
	position: absolute;
	left: 50%;
	top: calc(100% + 4px);
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(14, 18, 32, .8);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	white-space: nowrap;
	transform: translate(-50%, -4px);
	opacity: .0;
	transition: opacity .35s, transform .35s var(--c360-ease);
	pointer-events: none;
}

.c360-hotspot:hover .c360-hotspot__ring,
.c360-hotspot:focus-visible .c360-hotspot__ring {
	transform: scale(1.14);
	background: var(--c360-accent-2);
	border-color: #fff;
}

.c360-hotspot:hover .c360-hotspot__ring::before,
.c360-hotspot:hover .c360-hotspot__ring::after { animation: c360-ripple 1.2s var(--c360-ease) infinite; }
.c360-hotspot:hover .c360-hotspot__arrow { animation: c360-bob .9s var(--c360-ease) infinite; }
.c360-hotspot:hover .c360-hotspot__label,
.c360-hotspot:focus-visible .c360-hotspot__label,
.c360-hotspot.is-label .c360-hotspot__label { opacity: 1; transform: translate(-50%, 0); }

@keyframes c360-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

/* タッチ端末では常にラベル表示 */
@media (hover: none) {
	.c360-hotspot__label { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 600px) {
	.c360-modal__title { padding: 8px 14px 9px; }
	.c360-modal__scene { font-size: 15px; }
	.c360-room { width: 104px; height: 66px; }
	.c360-hotspot { width: 64px; height: 64px; }
}

/* OS の「動きを減らす」設定では、繰り返し動く飾りのアニメーションだけを止める
   （写真の切り替え・ズーム・モーダルの開閉などの動きは、設定に関係なく行う） */
@media (prefers-reduced-motion: reduce) {
	.c360-hotspot__ring::before, .c360-hotspot__ring::after, .c360-hotspot:hover .c360-hotspot__arrow,
	.c360-line.is-active .c360-line__pulse, .c360-mm-pulse, .c360-spot:hover .c360-spot__icon { animation: none !important; }
}

html.c360-lock, html.c360-lock body { overflow: hidden !important; }

/* 部屋移動時のクロスフェード用スナップショット */
.c360-snapshot {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 1;
}

/* 切り替え直後に矢印をふわっと表示 */
.c360-hotspot { animation: c360-hs-in .45s var(--c360-ease) both; }
@keyframes c360-hs-in {
	from { opacity: 0; transform: scale(.85); }
	to { opacity: 1; transform: none; }
}

/* 階層切り替え（右側の縦並びボタン） */
.c360-floors {
	position: absolute;
	top: 50%;
	right: max(16px, env(safe-area-inset-right));
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 5px;
	border: 1px solid var(--c360-glass-border);
	border-radius: 999px;
	background: var(--c360-glass);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	transform: translateY(-50%);
}
.c360-floors[hidden] { display: none; }
.c360-floor {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, .85);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .25s, color .25s;
}
.c360-floor:hover, .c360-floor:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; outline: none; }
.c360-floor.is-current { background: #fff; color: #0e1220; cursor: default; }
@media (max-width: 600px) {
	.c360-floor { width: 40px; height: 40px; font-size: 13px; }
}

/* フロアマップ（ミニマップ） */
.c360-minimap {
	position: absolute;
	top: calc(max(16px, env(safe-area-inset-top)) + 78px);
	left: 16px;
	z-index: 20;
	width: 300px;
	max-width: calc(100% - 92px);
	padding: 8px 10px 10px;
	border: 1px solid var(--c360-glass-border);
	border-radius: 16px;
	background: var(--c360-glass);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	animation: c360-mm-in .35s var(--c360-ease) both;
}
.c360-minimap[hidden] { display: none; }
@keyframes c360-mm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.c360-minimap__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.c360-minimap__title { font-size: 12px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.c360-minimap__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer;
}
.c360-minimap__close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.c360-minimap__close svg { width: 14px; height: 14px; }
.c360-minimap__svg { display: block; width: 100%; height: auto; overflow: visible; }
.c360-mm-links line { stroke: rgba(255, 255, 255, .28); stroke-width: 2; stroke-linecap: round; }
.c360-mm-dot { cursor: pointer; outline: none; }
.c360-mm-dot circle { fill: rgba(255, 255, 255, .7); transition: fill .2s, r .2s; }
.c360-mm-dot .c360-mm-hit { fill: transparent; }
.c360-mm-dot.is-named circle:not(.c360-mm-hit) { fill: #fff; }
.c360-mm-dot:hover circle:not(.c360-mm-hit), .c360-mm-dot:focus-visible circle:not(.c360-mm-hit) { fill: var(--c360-accent-2); r: 5.5; }
.c360-mm-dot text, .c360-mm-here-label { fill: #fff; font-size: 10px; font-weight: 700; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3px; pointer-events: none; }
.c360-mm-view path { fill: rgba(63, 99, 255, .45); }
.c360-mm-here { fill: var(--c360-accent-2); stroke: #fff; stroke-width: 2; }
.c360-mm-pulse { fill: var(--c360-accent-2); opacity: .35; transform-origin: center; animation: c360-mm-pulse 2s ease-out infinite; }
@keyframes c360-mm-pulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.8); opacity: 0; } }
@media (max-width: 600px) {
	.c360-minimap { width: 200px; top: calc(max(16px, env(safe-area-inset-top)) + 70px); }
}

.c360-mm-dot text.is-hover-only { opacity: 0; transition: opacity .15s; }
.c360-mm-dot:hover text.is-hover-only, .c360-mm-dot:focus-visible text.is-hover-only { opacity: 1; }

/* 地図を閉じている時の「マップを表示」ボタン */
.c360-minimap-show {
	position: absolute;
	top: calc(max(16px, env(safe-area-inset-top)) + 78px);
	left: 16px;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px 8px 11px;
	border: 1px solid var(--c360-glass-border);
	border-radius: 999px;
	background: var(--c360-glass);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background .25s;
}
.c360-minimap-show[hidden] { display: none; }
.c360-minimap-show:hover, .c360-minimap-show:focus-visible { background: rgba(40, 48, 80, .85); outline: none; }
.c360-minimap-show svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
	.c360-minimap-show { top: calc(max(16px, env(safe-area-inset-top)) + 70px); }
}

/* 直接リンク：コピーボタンと通知 */
.c360-modal__actions { display: flex; gap: 8px; pointer-events: auto; }
.c360-modal__share:hover, .c360-modal__share:focus-visible { transform: none; }
.c360-toast {
	position: absolute;
	top: calc(max(16px, env(safe-area-inset-top)) + 60px);
	right: 16px;
	z-index: 40;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(14, 18, 32, .85);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.c360-toast.is-show { opacity: 1; transform: none; }

/* =========================================================
   マウスに付いて動く移動の矢印（マウスのある端末）
   ========================================================= */
.c360-cursor-on,
.c360-cursor-on * { cursor: none !important; }
.c360-cursor {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 85; /* 操作バー（90）より下、写真と目印より上 */
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
	will-change: transform;
}
.c360-cursor.is-on { opacity: 1; }
.c360-cursor__disc {
	/* 床に置いた円盤。JS が距離に応じて大きさ・平たさ・傾きを変える（100px を基準に拡大縮小） */
	position: absolute;
	left: -50px;
	top: -50px;
	width: 100px;
	height: 100px;
	transform-origin: 50% 50%;
	transition: opacity .15s;
}
.c360-cursor__ring {
	/* 色は写真になじむ白（青などの色を付けると写真の上で浮いて見える） */
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, .92);
	background: radial-gradient(closest-side, rgba(255, 255, 255, .34), rgba(255, 255, 255, .14) 78%, rgba(255, 255, 255, .06));
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 0 18px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.c360-cursor__arrow {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
	transition: transform .12s ease-out;
}
.c360-cursor__arrow svg { width: 62px; height: 62px; }
.c360-cursor__label {
	position: absolute;
	left: 0;
	top: 38px;
	transform: translateX(-50%);
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(14, 18, 32, .82);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	white-space: nowrap;
}

/* 写真上の固定の矢印（マウスのある端末では、行き先の方向を示す控えめな目印。クリック範囲ではない） */
.c360-hotspot--hint { pointer-events: none; }
.c360-hotspot--hint .c360-hotspot__ring { inset: 22px; background: rgba(255, 255, 255, .18); border-width: 1.5px; box-shadow: none; }
.c360-hotspot--hint .c360-hotspot__ring::before,
.c360-hotspot--hint .c360-hotspot__ring::after { display: none; }
.c360-hotspot--hint .c360-hotspot__arrow svg { width: 18px; height: 18px; }
.c360-hotspot--hint .c360-hotspot__arrow { opacity: .85; }
.c360-hotspot--hint .c360-hotspot__label { display: none; }

/* 隠したボタン（ツアー専用ページの閉じるボタン等）は、ボタンの display 指定より優先して隠す */
.c360-modal .c360-btn[hidden] { display: none !important; }