@charset "UTF-8";

/* ============================================================
   anime.css : Slide 3 日本地図×案内ロボット 専用スタイル
   既存CSSと干渉しないよう #slide3 の .map_stage 配下にスコープ
   （有限会社ウェブミックスデザイン）
   ============================================================ */

/* Slide 3 : 日本地図×案内ロボット 変数 */
:root {
	/* ロボットの配置（地図ステージに対する % で微調整しやすく）
	   ★地図（陸地）に重ならない周辺の海（空白）部分へ配置。ピクセル判定で確定 */
	--robot-north-top: 32%;
	--robot-north-left: 50%;
	--robot-central-top: 10%;
	--robot-central-left: 60%;
	--robot-west-top: 42%;
	--robot-west-left: 30%;
	--robot-kyushu-top: 63%;
	--robot-kyushu-left: 10%;
	--robot-kanto-top: 60%;
	--robot-kanto-left: 92.5%;

	/* ★クリックで開いた時にロボ＋吹き出しが横へずれる量
	   （＋の値＝右へ ／ −の値＝左へ）。ここで各ロボを個別に調整できます */
	--robot-north-shift: 0px;
	--robot-central-shift: 0px;
	--robot-west-shift: 0px;
	--robot-kyushu-shift: 0px;
	--robot-kanto-shift: 0px;

	/* サイズ・色・吹き出し */
	--robot-size: 120px;         /* ← ロボットの基準サイズ（2倍）。SPで縮小 */
	--robot-gap: 8px;            /* ロボットと吹き出しの間隔 */
	--balloon-bg: #ffffff;
	--balloon-line: #2fae4a;     /* 地図の緑に合わせる */
	--balloon-text: #333333;
	--balloon-radius: 14px;
	--balloon-max-width: 280px;  /* ← 吹き出しの最大幅（文字数可変。超えたら折返し） */
	--pin-color: #e8433c;
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* ← ぷにっと出る用 */
}

/* 既存の静的地図はインタラクティブ版と差し替え表示（HTML自体は残す） */
#slide3 .j_map {
	display: none;
}

/* --------------------------------------------
   地図＋ロボット群のステージ
   -------------------------------------------- */
#slide3 .map_stage {
	position: relative;
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
}

#slide3 .map_svg-wrap {
	position: relative;
	width: 100%;
}

#slide3 .map_img {
	display: block;
	width: 100%;
	height: auto;
}

/* 装飾ピン群のSVGオーバーレイ（純装飾・クリック不可） */
#slide3 .map_pins_svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* ← これが重要：地図・ロボット操作を妨げない */
}

/* ピン pulse（控えめな明滅・位相ズレ） */
#slide3 .map_pins use {
	-webkit-animation: anime_pinPulse 3.2s ease-in-out infinite;
	animation: anime_pinPulse 3.2s ease-in-out infinite;
}

#slide3 .map_pins use:nth-of-type(2n) {
	-webkit-animation-delay: 0.9s;
	animation-delay: 0.9s;
}

#slide3 .map_pins use:nth-of-type(3n) {
	-webkit-animation-delay: 1.7s;
	animation-delay: 1.7s;
}

@-webkit-keyframes anime_pinPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

@keyframes anime_pinPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* --------------------------------------------
   案内ロボット（button リセット＋絶対配置）
   -------------------------------------------- */
#slide3 .robot {
	position: absolute;
	width: var(--robot-size);
	height: var(--robot-size);
	min-width: 44px;  /* タップ領域確保 */
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-appearance: none;
	appearance: none;
	z-index: 20;
	line-height: 0;
}

#slide3 #robotNorth {
	top: var(--robot-north-top);
	left: var(--robot-north-left);
}

#slide3 #robotKanto {
	top: var(--robot-kanto-top);
	left: var(--robot-kanto-left);
}

#slide3 #robotCentral {
	top: var(--robot-central-top);
	left: var(--robot-central-left);
}

#slide3 #robotWest {
	top: var(--robot-west-top);
	left: var(--robot-west-left);
}

#slide3 #robotKyushu {
	top: var(--robot-kyushu-top);
	left: var(--robot-kyushu-left);
}

/* Lottie 描画先 */
#slide3 .robot_anim {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 0.25s var(--ease-pop);
	transition: -webkit-transform 0.25s var(--ease-pop);
	transition: transform 0.25s var(--ease-pop);
	transition: transform 0.25s var(--ease-pop), -webkit-transform 0.25s var(--ease-pop);
}

#slide3 .robot:hover .robot_anim {
	-webkit-transform: scale(1.06);
	transform: scale(1.06);
}

#slide3 .robot_anim svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ロボットの下に表示するラベル「参加者の声」 */
#slide3 .robot_caption {
	position: absolute;
	top: 91%;            /* ← ロボの絵の下端がボタンの約91%。ここを基準に配置（サイズ追従） */
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	margin-top: 1px;     /* ← ロボとの隙間。数字を小さくすると更に詰まる */
	white-space: nowrap;
	font-size: 13px;      /* ← PCでのフォントサイズ */
	font-weight: 700;
	line-height: 1.3;
	color: #333333;       /* 黒字 */
	background: rgba(255, 255, 255, 0.85);
	padding: 1px 8px;
	border-radius: 999px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* フォーカスリング（a11y） */
#slide3 .robot:focus {
	outline: 3px solid #1a73e8;
	outline-offset: 3px;
	border-radius: 12px;
}

#slide3 .robot:focus:not(:focus-visible) {
	outline: none;
}

#slide3 .robot:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 3px;
	border-radius: 12px;
}

/* Lottie フォールバック（静的SVG＋CSS簡易手振り） */
#slide3 .robot_anim.is-fallback .fallback_arm {
	-webkit-transform-origin: 312px 322px;
	transform-origin: 312px 322px;
	transform-box: view-box;
	-webkit-animation: anime_robotWave 1.4s ease-in-out infinite alternate;
	animation: anime_robotWave 1.4s ease-in-out infinite alternate;
}

@-webkit-keyframes anime_robotWave {
	0% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
	100% { -webkit-transform: rotate(42deg); transform: rotate(42deg); }
}

@keyframes anime_robotWave {
	0% { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
	100% { -webkit-transform: rotate(42deg); transform: rotate(42deg); }
}

/* スクリーンリーダー専用テキスト（.map_stage 内のみ） */
#slide3 .map_stage .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* --------------------------------------------
   吹き出し（初期非表示・排他制御・向き出し分け）
   -------------------------------------------- */
#slide3 .robot_balloon {
	position: absolute;
	width: -webkit-max-content; /* ← これが重要：文字数に応じて幅が伸縮（可変） */
	width: -moz-max-content;
	width: max-content;
	max-width: var(--balloon-max-width); /* ← 超えたら折り返す上限 */
	padding: 10px 14px;
	overflow-wrap: break-word;
	word-break: break-word;
	background: var(--balloon-bg);
	border: 2px solid var(--balloon-line);
	border-radius: var(--balloon-radius);
	-webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	opacity: 0;
	visibility: hidden;
	z-index: 30;
	-webkit-transition: opacity 0.3s var(--ease-pop), visibility 0.3s;
	transition: opacity 0.3s var(--ease-pop), visibility 0.3s;
}

#slide3 .robot_balloon.is-open {
	opacity: 1;
	visibility: visible;
}

/* GSAP 制御時は CSS トランジションを無効化（二重イージング防止） */
#slide3 .map_stage.is-gsap .robot_balloon {
	-webkit-transition: none;
	transition: none;
}

#slide3 .robot_balloon-text {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--balloon-text); /* ← 白地に #333：WCAG AA 確保 */
	text-align: left;
}

/* 吹き出しのしっぽ（三角） */
#slide3 .robot_balloon::before,
#slide3 .robot_balloon::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

/* dir=left : ロボットの左に出す → しっぽは右辺 */
#slide3 .robot_balloon[data-dir="left"]::before {
	right: -13px;
	top: 50%;
	margin-top: -8px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid var(--balloon-line);
}

#slide3 .robot_balloon[data-dir="left"]::after {
	right: -9px;
	top: 50%;
	margin-top: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--balloon-bg);
}

/* dir=right : ロボットの右に出す → しっぽは左辺 */
#slide3 .robot_balloon[data-dir="right"]::before {
	left: -13px;
	top: 50%;
	margin-top: -8px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 13px solid var(--balloon-line);
}

#slide3 .robot_balloon[data-dir="right"]::after {
	left: -9px;
	top: 50%;
	margin-top: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 10px solid var(--balloon-bg);
}

/* dir=up : ロボットの上に出す → しっぽは下辺 */
#slide3 .robot_balloon[data-dir="up"]::before {
	bottom: -13px;
	left: 50%;
	margin-left: -8px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 13px solid var(--balloon-line);
}

#slide3 .robot_balloon[data-dir="up"]::after {
	bottom: -9px;
	left: 50%;
	margin-left: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 10px solid var(--balloon-bg);
}

/* 各吹き出しの配置（ロボットの変数と同期）
   ロボット本体はボックス中央の約5割しか占めないため、
   オフセットは size/2 ではなく実表示幅に合わせた係数（約0.26）で寄せる */

/* dir=right（North / Central / West / Kyushu）：ロボットの右へ */
#slide3 #balloonNorth,
#slide3 #balloonCentral,
#slide3 #balloonWest,
#slide3 #balloonKyushu {
	margin-left: calc((var(--robot-size) * 0.26) + var(--robot-gap));
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#slide3 #balloonNorth {
	top: var(--robot-north-top);
	left: var(--robot-north-left);
}

#slide3 #balloonCentral {
	top: var(--robot-central-top);
	left: var(--robot-central-left);
}

#slide3 #balloonWest {
	top: var(--robot-west-top);
	left: var(--robot-west-left);
}

#slide3 #balloonKyushu {
	top: var(--robot-kyushu-top);
	left: var(--robot-kyushu-left);
}

/* dir=left（Kanto）：ロボットの左へ */
#slide3 #balloonKanto {
	top: var(--robot-kanto-top);
	right: calc(100% - var(--robot-kanto-left) + (var(--robot-size) * 0.26) + var(--robot-gap));
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* --------------------------------------------
   レスポンシブ（既存BP 1024px / 640px に合わせる）
   -------------------------------------------- */
/* タブレット：ロボットを少し縮小（左右の空きに収める） */
@media screen and (max-width: 1024px) {
	:root {
		--robot-size: 132px;
	}
}

@media screen and (max-width: 640px) {
	:root {
		--robot-size: 80px; /* ← 640px以下のロボの大きさ。この数字で調整（タップ領域44px以上は維持） */

		/* ★640px以下（スマホ）専用の横ずれ量。PCとは別にここで調整できます
		   （＋の値＝右へ ／ −の値＝左へ） */
	--robot-north-shift: -150px;
	--robot-central-shift: -190px;
	--robot-west-shift: -80px;
	--robot-kyushu-shift: -20px;
	--robot-kanto-shift: 0px;
	}

	#slide3 .robot_balloon {
		max-width: -webkit-calc(100vw - 110px);
		max-width: calc(100vw - 110px); /* ← 画面内に収める（はみ出し防止） */
	}

	#slide3 .robot_balloon-text {
		font-size: 12px;
	}

	/* スマホでは「参加者の声」ラベルを小さく */
	#slide3 .robot_caption {
		font-size: 10px;   /* ← スマホでのフォントサイズ */
		padding: 1px 6px;
	}
}

/* --------------------------------------------
   prefers-reduced-motion : 動きを停止／簡略化
   -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#slide3 .map_pins use {
		-webkit-animation: none;
		animation: none;
	}

	#slide3 .robot_anim,
	#slide3 .robot_balloon {
		-webkit-transition: none;
		transition: none;
	}

	#slide3 .robot:hover .robot_anim {
		-webkit-transform: none;
		transform: none;
	}

	#slide3 .robot_anim.is-fallback .fallback_arm {
		-webkit-animation: none;
		animation: none;
	}
}