/* ==============================================
   index.css - Greenexpo Kids Theme
   トップページ（マップ）専用スタイル
   
   注意: url()内の画像パスは実際のテーマURLに合わせて変更してください
   例: url('../images/bk_img.svg')
     → url('/wp-content/themes/greenexpo-kids/assets/images/bk_img.svg')
============================================== */

/* ════════ index.html固有ボディ上書き ════════ */
body {
	background: #b8dff5 url("../images/bk_img.svg") no-repeat center top / cover !important;
	overflow: hidden !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	cursor: grab;
	user-select: none;
	min-height: unset !important;
	display: block !important;
	position: static !important;
	top: 0 !important;
	font-family: "Noto Sans JP", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body::before { display: none !important; }
body.dragging  { cursor: grabbing; }
body.modal-open { cursor: default; }

/* ヘッダーはpointer-eventsのみ上書き（positionはcommon.cssのfixedを継承） */
#site-header {
	background: transparent !important;
	pointer-events: none;
}
#logo-header,
#hamburger { pointer-events: auto; }

/* viewportは背景なし・overflow:hiddenのみ */
#viewport {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden;
	background: transparent;
}
@media (max-width: 768px) {
	body {
		background: #b8dff5 url("../images/bk_img_sp.svg") no-repeat center top / cover !important;
	}
}
@media (max-width: 680px) {
	#site-header {
		/*background: var(--accent) !important;*/
		top:0;
		padding-top: 20px;
		padding-bottom: 20px;
		height: auto;
	}
}

/* ━━ 以下は元のstyleタグの内容（重複削除済み） ━━ */
/* ════════ RESET ════════ */
:root {
	--accent:  #0068b7;
	--accent2: #48bbc6;
	--accent3: #ea4d49;
	--shadow: 0 6px 28px rgba(0,0,0,0.22);
	--header-h: 74px;
	--focus-ring: 3px solid #005fcc;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ════════ ZOOM CONTROLS ════════ */
#zoom-controls {
	position: fixed; bottom: 50px; right: 24px;
	z-index: 1000; display: flex; flex-direction: column; gap: 6px;
}
.zoom-btn {
	width: 44px; height: 44px; border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.15);
	background: #fff;
	color: #333; font-size: 22px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: background 0.15s, transform 0.1s;
}
.zoom-btn:hover { background: #fff; transform: scale(1.08); }
#reset-btn {
	position: fixed; bottom: 50px; left: 24px;
	z-index: 1000; padding: 10px 16px; border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.15);
	background: rgba(255,255,255,0.88); color: #444;
	font-size: 12px;
	cursor: pointer; backdrop-filter: blur(8px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: all 0.2s;
	display: none!important;
}
#reset-btn:hover { color: var(--accent); border-color: var(--accent); }
#show-tutorial-btn {
	position: fixed; bottom: 50px; left: 24px;
	z-index: 1000; padding: 10px 16px; border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.15);
	background: rgba(255,255,255,0.88); color: #444;
	font-family: "M PLUS 1p", sans-serif; font-size: 12px;
	cursor: pointer; backdrop-filter: blur(8px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: all 0.2s;
}
#show-tutorial-btn:hover { color: var(--accent); border-color: var(--accent); }

/* トップページではsite-footerをfixed固定に上書き */
#site-footer {
	position: fixed; bottom: 0; left: 0;
	width: 100%;
	z-index: 1000;
	pointer-events: none;
}

/* ════════ VIEWPORT & CANVAS ════════ */
/* #canvas / #content-frame の width・height・left は、背景SVG(content_img.svg)の
   実際の横幅に応じて index.js の applyCanvasSize() が動的に設定する（インラインstyle）。
   ここでのpx値は読み込み前の初期表示用フォールバックにすぎない（雲カーテンで隠れるため実害なし）。 */
#canvas {
	position: absolute;
	width: 3840px; height: 2420px;
	transform-origin: 0 0;
	z-index: 1;
	/* PC（背景が複雑なSVGのまま）ではドラッグ・ズームのたびに再ラスタライズしないよう
	   独立した合成レイヤーとして扱わせる。
	   スマホでは背景を既に軽量なラスター画像(webp/png)に切り替えているため、
	   この最適化の効果は薄い一方、canvas自体のサイズが非常に大きい(4816×2420px)ため、
	   Retina解像度でwill-changeによるGPUテクスチャ確保がiPhoneのクラッシュ原因になっている
	   可能性が高く、下のメディアクエリでスマホ時のみ無効化している。 */
	will-change: transform;
	/* 背景は#bg-illustration(<img>)側に移行したのでbackgroundは指定しない */
}
@media (max-width: 768px) {
	#canvas {
		will-change: auto;
	}
}
#bg-illustration {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	/* JS側(applyCanvasSize)のCANVAS_W計算に多少のズレがあっても、
	   常に高さ基準でcanvasいっぱいをカバーし、はみ出た左右は均等にクロップする */
	object-fit: cover;
	object-position: center center;
	pointer-events: none;
	user-select: none;
}
/* 従来のノード・パーツ・気球等はすべてこの中（3840×2420の座標系）に配置される。
   #canvas内でのlocal位置（left）はapplyCanvasSize()がMARGIN_X分のオフセットを設定する。 */
#content-frame {
	position: absolute;
	left: 0; top: 0;
	width: 3840px; height: 2420px;
}

/* ════════ 雲カーテン ════════ */
#cloud-curtain-left,
#cloud-curtain-right {
	position: fixed;
	top: 0; bottom: 0;
	width: 55vw;
	z-index: 500;
	pointer-events: none;
	transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#cloud-curtain-left {
	left: 0;
	transform: translateX(0);
}
#cloud-curtain-right {
	right: 0;
	transform: translateX(0);
}
#cloud-curtain-left img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
	margin: 0;
	border-radius: 0;
}
#cloud-curtain-right img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: left center;
	display: block;
	margin: 0;
	border-radius: 0;
}
/* 開いた状態 */
#cloud-curtain-left.open  { transform: translateX(-100%); }
#cloud-curtain-right.open { transform: translateX(100%); }

/* ════════ キャンバス上パーツレイヤー ════════ */
#parts-layer {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: 1; /* nodeより下 */
}
/* 気球(#balloon, z-index:10)より前面に出したいパーツ（雲など）用のレイヤー */
#parts-layer-front {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: 15; /* 気球(10)より前面 */
}
.map-part {
	position: absolute;
	pointer-events: none; /* ドラッグ操作を妨げない */
}
.map-part img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
	border-radius: 0;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}
/* iOSダブルタップズーム防止 */
#btn-zoom-in, #btn-zoom-out, #reset-btn, #show-tutorial-btn {
  touch-action: manipulation;
}

/* ════════ 気球アニメーション ════════ */
#balloon {
	transition: transform 0.1s;
}
#balloon:hover {
	filter: brightness(1.05);
}
/* クリック可能だと気づきにくい問題への対応：ホバー/フォーカス時に「クリック！」ヒントを表示 */
.balloon-hint {
	position: absolute;
	left: 50%;
	top: 100px;
	transform: translate(-50%, -100%) scale(0.9);
	transform-origin: center bottom;
	white-space: nowrap;
	background: #ea4d49;
	color: #fff;
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 100px;
	box-shadow: 0 4px 10px rgba(0,0,0,.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
/* 吹き出しの三角形（下向き） */
.balloon-hint::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -14px;
	transform: translateX(-50%);
	border: 14px solid transparent;
	border-top-color: #ea4d49;
}
#balloon:hover .balloon-hint,
#balloon:focus-visible .balloon-hint {
	opacity: 1;
	transform: translate(-50%, -100%) scale(1);
}
.node {
	position: absolute;
	background: url("../images/link_b.svg") no-repeat center center / 100% 100%;
	/* SVGのアスペクト比 372.8:232.58 に合わせたサイズ */
	width: 382px;
	height: 238px;
	padding: 10px 35px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer; text-align: center;
	transition: box-shadow 0.2s, border-color 0.2s;
	pointer-events: all;
	will-change: transform;
	z-index: 2; /* parts-layerより上 */
}
.node.hub {
	background: url("../images/link_a.svg") no-repeat center center / 100% 100%;
	width: 420px;
	height: 420px;
	/* 上下左右の余白でテキストをSVG枠内に収める */
	position: relative;
}
.node.hub .hub-wrap{
	position: absolute;
	bottom: 0;
	padding: 38px 50px;
}
/* data-id="hub"のノードはクリック無効 */
.node[data-id="hub"] {
	pointer-events: none;
	cursor: default;
}
.node.hukidashi {
	background: url("../images/link_c.svg") no-repeat center center / 100% 100%;
	width: 320px;
	height: 320px;
	/* 上下左右の余白でテキストをSVG枠内に収める */
	padding: 40px 40px;
}

.node.new::before{
	content: "NEW";
	display: block;
	margin: -30px auto 10px;
	background: #dd1f16;
	border-radius: 10px;
	font-size: 25px;
	font-weight: bold;
	color: #fff;
	transform: skewY(-10deg);
	padding: 3px 15px;
}

.node-label {
	font-size: 20px; font-weight: 700;
	color: #005a9e;/*水色の箇所に乗ってもアクセシビリティOKな色*/
	margin-bottom: 4px; text-transform: uppercase;
	line-height: 1.1;
	transform: skewY(-10deg);
	display: block;
}
.hub .node-label{
	font-size: 36px;
	color: #dd1f16;
}
.hukidashi .node-label{
	font-size: 30px;
	color: #dd1f16;
}
.more{
	transform: skewY(-10deg);
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	bottom: -5px;
	background: var(--accent);
	color: #fff;
	padding: 10px 20px;
	border-radius: 100px;
}
.hub .more{
	background: #ea4d49;
	left: 138px;
}
/* WCAG AA: #444 on white = コントラスト比 9.7:1 ✓ */
.node-desc { 
	font-size: 28px; 
	font-weight: 600;
	color: #444; 
	line-height: 1.3; 
	transform: skewY(-10deg); 
	display: block; 
}
.hub .node-desc,
.hukidashi .node-desc{ font-size: 28px;}
.node-badge {
	display: inline-block; margin-top: 10px;
	padding: 3px 10px; border-radius: 999px;
	font-size: 10px;
}
html[lang="en"] .node.en-font-small{
	font-size: 12px;
}
/* バッジカラーはWCAG AA準拠（4.5:1以上） */
.accent1 .node-badge { background: rgba(91,106,240,0.12);  color: #3a47c8; }
.accent2 .node-badge { background: rgba(232,115,74,0.12);  color: #8f3e10; }
.accent3 .node-badge { background: rgba(74,191,168,0.12);  color: #1a6b5c; }

/* ════════ TUTORIAL ════════ */
#tutorial {
	position: fixed; inset: 0; z-index: 4000;
	background: rgba(0,0,0,0.55);
	display: none; /* デフォルト非表示。初回アクセス時のみJSで表示 */
	align-items: center; justify-content: center;
	padding: 20px;
	transition: opacity 0.4s;
}
#tutorial.show {
	display: flex;
}
#tutorial.hidden { opacity: 0; pointer-events: none; }
.tutorial-box {
	background: #fff; border-radius: 20px;
	padding: 36px 32px; max-width: 420px; width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.tutorial-box h2 {
	font-size: 20px; font-weight: 700;
	color: #1a1a2e; margin-bottom: 24px;
}
.tutorial-items {
	list-style: none;
	display: flex; flex-direction: column; gap: 16px;
	margin-bottom: 28px; text-align: left;
}
.tutorial-items li {
	display: flex; align-items: flex-start; gap: 14px;
	font-size: 14px; color: #333; line-height: 1.55;
}
.t-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.tutorial-items strong { display: block; font-size: 15px; color: #1a1a2e; }
/* PC/SP切り替え */
.only-pc { display: none; }
.only-sp { display: flex; flex-direction: column; gap: 16px; }
@media (hover: hover) and (pointer: fine) {
	.only-pc { display: flex; flex-direction: column; gap: 16px; }
	.only-sp { display: none; }
}
#tutorial-close {
	padding: 14px 44px; border-radius: 999px;
	background: var(--accent); color: #fff;
	font-size: 15px; font-weight: 700;
	border: none; cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}
#tutorial-close:hover { background: var(--accent2); transform: scale(1.03); }

/* ════════ MODAL ════════ */
#modal-body .center{
	text-align: center;
}
#modal-body img{
	max-width: 100%;
}
#modal-overlay {
	position: fixed; inset: 0; z-index: 3000; /* site-header(2000)より上 */
	background: rgba(0,0,0,0.1);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s;
}
#modal-overlay.open { opacity: 1; pointer-events: all; }
#modal {
	background: #fff; border-radius: 20px;
	padding: 44px 36px 36px; max-width: 700px; width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 24px 64px rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity 0.3s;
}
#modal-overlay.open #modal { opacity: 1; }
#modal-close {
	position: absolute; top: 14px; right: 14px;
	width: 36px; height: 36px;
	border: none; background: rgba(0,0,0,0.08);
	border-radius: 50%; cursor: pointer;
	font-size: 18px; color: #333;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s;
}
#modal-close:hover { background: rgba(0,0,0,0.15); }
/* モーダル内トップへ戻るボタン */
#modal-scroll-top {
	position: sticky;
	bottom: 16px;
	float: right;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--accent);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: none; /* スクロール量に応じてJSで表示 */
	align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	transition: background 0.2s, transform 0.1s;
	z-index: 10;
}
#modal-scroll-top.show { display: flex; }
#modal-scroll-top:hover { background: #004f8a; transform: scale(1.08); }
#modal-title {
	font-size: 24px; font-weight: 700; color: #005a9e;
	text-align: center; margin-bottom: 10px;
	letter-spacing: 0.06em;
}
#modal-body  { font-size: 15px; color: #333; line-height: 1.8; margin-bottom: 12px; }

/* モーダル内 */
#modal-body p { 
	padding-bottom: 15px;
	font-size: 16px;
}
#modal-body p.other_site{ 
	font-size: 14px;
	margin-top: -12px;
}
/* モーダル内リスト（①②付きの場合はlist-style:noneで番号非表示） */
#modal-body ol, #modal-body ul { list-style: none; padding-left: 0; }
#modal-body li { padding-bottom: 12px; }
#modal-body h3 {
	font-size: 26px; font-weight: 700; color: #157a85; text-align: center;
	padding: 10px 14px; margin-bottom: 14px;
	border-radius: 0 6px 6px 0;
}
#modal-body h3 ruby rt{ color: #157a85; }
#modal-body h4 {
	font-size: 18px; font-weight: 700; color: var(--accent);
	margin: 16px 0 8px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--accent);
}
#modal-body h4 ruby rt{ color: var(--accent); }
#modal-body h5 {
	font-size: 16px; font-weight: 700; color: #1a1a2e;
	margin: 0 0 24px;
	padding: 14px;
	border-left: 4px solid var(--accent);
	background: rgba(0,104,183,0.05);
	border-radius: 0 6px 6px 0;
}
#modal-body .mt50{margin-top: 50px;}
#modal-body .mb50{margin-bottom: 50px;}

/* モーダル内画像 */
.modal-img {
	width: 100%; height: auto;
	border-radius: 8px;
	margin-bottom: 8px;
	display: block;
}
.modal-img-caption {
	font-size: 12px;
	/*font-size: 18px;*/
	color: #888;
	text-align: center; margin-bottom: 15px;
}
#modal-body img.mascot{width: 420px;display: block;margin: 0 auto;}
#modal-body img.logo{width: 180px;display: block;margin: 30px auto;}

/* ルビ（WCAG 1.3.1: 読み補助） */
#modal-body ruby { ruby-align: center; }
#modal-body rt   { font-size: 0.6em; color: #666; }
/* template内のリンクボタン */
.modal-btn {
	display: block; margin: 20px auto;
	padding: 12px 32px; border-radius: 999px;
	background: var(--accent); color: #fff;
	font-weight: 700; font-size: 15px;
	text-decoration: none; text-align: center;
	width: fit-content;
	transition: filter 0.2s, transform 0.1s;
}
.modal-btn.mb50{margin-bottom: 50px;}
.modal-btn.modal-close-link{
	padding: 6px 32px;
	background: #157a85;
}
.modal-btn:hover { filter: brightness(0.88); transform: scale(1.02); }
/* ── 動画サムネイルリスト ── */
.video-item {
	margin-bottom: 20px;
	cursor: pointer;
}
.video-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 6px;
}
.video-thumb-wrap img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.2s;
}
.video-item:hover .video-thumb-wrap img { opacity: 0.8; }
.video-play-btn {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 40px; color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.6);
	pointer-events: none;
}
.video-title {
	font-size: 14px; color: #333; line-height: 1.5;
	padding-bottom: 0;
}

/* ── 動画プレーヤーオーバーレイ（モーダル外・iOSフリーズ対策） ── */
#video-player-overlay {
	position: fixed; inset: 0;
	z-index: 9000;
	background: rgba(0,0,0,0.9);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s;
}
#video-player-overlay.open {
	opacity: 1; pointer-events: all;
}
#video-player-inner {
	width: 100%; max-width: 800px;
	position: relative;
}
#video-player-close {
	position: absolute; top: -44px; right: 0;
	width: 36px; height: 36px;
	background: rgba(255,255,255,0.2);
	border: none; border-radius: 50%;
	color: #fff; font-size: 18px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s;
}
#video-player-close:hover { background: rgba(255,255,255,0.4); }
#video-player-title {
	color: #fff; font-size: 14px;
	text-align: center; margin-bottom: 10px;
	padding-bottom: 0;
}
#video-player-el {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	border-radius: 8px;
	background: #000;
}

.mascot_name{
	text-align: center;
	font-weight: bold;
	color: var(--accent);
	line-height: 1.5;
}
.mascot_name strong{
	font-size: 24px;
}
.mascot_name span{
	font-weight: normal;font-size: 15px;color: #555;
}

.village dt{
	font-weight: bold;
	font-size: 18px;
	color: #0068b7;
}
.village dd{
	margin-bottom: 25px;
}

@media (max-width: 600px) {
	#modal { padding: 40px 20px 28px; }
	#modal-title { font-size: 22px; }
	.tutorial-box { padding: 28px 20px; }
}
@media (max-width: 680px) {
	/* ヘッダー内のyokohamaロゴを非表示 */
	#logo-header .yokohama-logo { display: none; }
	/* ハンバーガーボタンをヘッダーの高さに揃える */
	#hamburger {
		width: 100px;
		height: var(--header-h);
		font-size: 10px;
	}
	#ruby-toggle{
		top: 109px;
	}
}

.game_info{
	margin: 50px 0;
}