/* Papatto Clickable - フロント表示 */

.pc-map {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.pc-map img {
	display: block;
	width: 100%;
	height: auto;
}

.pc-map svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* 塗り・枠線は個別のCSS変数で設定（不透明度0＝非表示扱い） */
.pc-map .pc-area {
	fill: var(--pc-fill, #2271b1);
	stroke: var(--pc-stroke, var(--pc-fill, #2271b1));
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	transition: fill-opacity 0.15s ease, stroke-opacity 0.15s ease;
}

.pc-map a .pc-area {
	cursor: pointer;
}

/* 常に表示モード */
.pc-mode-always .pc-area {
	fill-opacity: var(--pc-fill-o, 0.35);
	stroke-opacity: var(--pc-stroke-o, 0.9);
}

/* ホバー時の強調は乗算で行う（不透明度0のものは0のまま＝非表示を維持） */
.pc-mode-always a:hover .pc-area,
.pc-mode-always a:focus .pc-area {
	fill-opacity: min(calc(var(--pc-fill-o, 0.35) * 1.5), 1);
}

/* ホバー時のみ表示モード */
.pc-mode-hover .pc-area {
	fill-opacity: 0;
	stroke-opacity: 0;
}

/* 装飾なしモード：常に透明（クリック・タップは可能） */
.pc-mode-none .pc-area {
	fill-opacity: 0;
	stroke-opacity: 0;
}

.pc-mode-hover a:hover .pc-area,
.pc-mode-hover a:focus .pc-area {
	fill-opacity: var(--pc-fill-o, 0.35);
	stroke-opacity: var(--pc-stroke-o, 0.9);
}

/* リンク未設定エリアは装飾のみ */
.pc-map .pc-nolink .pc-area {
	cursor: default;
}

/* キーボード操作時のフォーカス表示 */
.pc-map a:focus {
	outline: none;
}

.pc-map a:focus-visible .pc-area {
	stroke: #d63638;
	stroke-opacity: 1;
}

/* ------------------------------------------------------------------
 * モードB：左マップ・右写真の2分割レイアウト
 * ------------------------------------------------------------------ */

.pc-split {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* 写真を左に表示する設定（DOM順はマップ→写真のまま反転） */
.pc-split.pc-photo-left {
	flex-direction: row-reverse;
}

/* --pc-map / --pc-photo は幅比率（%値ではなくflex-growの重み） */
.pc-split .pc-map {
	flex: var(--pc-map, 50) 1 0;
	min-width: 0;
}

.pc-split .pc-photo {
	flex: var(--pc-photo, 50) 1 0;
	min-width: 0;
	line-height: 1.6;
}

.pc-photo-item {
	display: none;
	margin: 0;
}

.pc-photo-item.pc-current {
	display: block;
}

.pc-photo-item img {
	display: block;
	width: 100%;
	height: auto;
}

.pc-photo-item figcaption {
	margin-top: 8px;
}

.pc-photo-empty,
.pc-photo-placeholder.pc-current {
	display: block;
	padding: 48px 16px;
	background: #f3f4f5;
	color: #646970;
	text-align: center;
}

/* エリアはボタンとして動作 */
.pc-split .pc-hit .pc-area {
	cursor: pointer;
}

.pc-split .pc-hit:focus {
	outline: none;
}

.pc-split .pc-hit:focus-visible .pc-area {
	stroke: #d63638;
	stroke-opacity: 1;
}

.pc-mode-always .pc-hit:hover .pc-area,
.pc-mode-always .pc-hit.pc-active .pc-area {
	fill-opacity: min(calc(var(--pc-fill-o, 0.35) * 1.5), 1);
	stroke-opacity: min(calc(var(--pc-stroke-o, 0.9) * 1.2), 1);
}

.pc-mode-hover .pc-hit:hover .pc-area,
.pc-mode-hover .pc-hit.pc-active .pc-area {
	fill-opacity: var(--pc-fill-o, 0.35);
	stroke-opacity: var(--pc-stroke-o, 0.9);
}

/* スマホでは縦積み（上：マップ、下：写真） */
@media (max-width: 640px) {
	.pc-split,
	.pc-split.pc-photo-left {
		flex-direction: column;
	}

	.pc-split .pc-map,
	.pc-split .pc-photo {
		flex: 1 1 auto;
		width: 100%;
	}
}