/**
 * ==================================================
 * ゲーム開始画面
 * ==================================================
 */

.gg-guest-start{

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	width: 100%;

	max-width: 420px;

	margin: 40px auto;

	padding: 30px 20px;

	box-sizing: border-box;

	background: #ffffff;

	border-radius: 20px;

	box-shadow: 0 8px 25px rgba(0,0,0,0.12);

	text-align: center;

}


/**
 * タイトル
 */

.gg-guest-start h2{

	margin: 0 0 10px;

	font-size: 26px;

	font-weight: bold;

	color: #333;

}


/**
 * 説明
 */

.gg-guest-start p{

	margin: 0 0 25px;

	font-size: 15px;

	color: #666;

}
/**
 * ==================================================
 * ミッションタイトル
 * ==================================================
 */

.gg-header .wp-block-heading{

	padding: 10px;

	background: #333;

	color: #fff!important;

	text-align: center;

	font-size: 20px;

	border-radius: 5px;

}
@media(max-width:600px){

	.wp-block-heading{

		font-size: 17px;

	}

}
/**
 * ボタン共通
 */

.gg-guest-start > button{

	display: block;

	width: 100%;

	max-width: 300px;

	margin: 8px 0;

	padding: 15px 20px;

	border: none;

	border-radius: 12px;

	font-size: 16px;

	font-weight: bold;

	cursor: pointer;

	transition:

		transform 0.15s ease,

		box-shadow 0.15s ease;

}


/**
 * 押したとき
 */

.gg-guest-start > button:active{

	transform: scale(0.97);

}


/**
 * はじめて遊ぶ
 */

.gg-guest-start > button:first-of-type{

	background: #e85d04;

	color: #ffffff;

	box-shadow: 0 4px 10px rgba(232,93,4,0.3);

}


/**
 * ゲームを再開する
 */

.gg-guest-start > button:nth-of-type(2){

	background: #457b9d;

	color: #ffffff;

	box-shadow: 0 4px 10px rgba(69,123,157,0.3);

}


/**
 * ゲーム再開フォーム
 */

#gg-resume-form{

	width: 100%;

	max-width: 300px;

	margin-top: 15px;

	padding: 15px;

	box-sizing: border-box;

	background: #f5f5f5;

	border-radius: 12px;

}


/**
 * ゲストコード入力
 */

#gg-guest-code-input{

	width: 100%;

	padding: 12px;

	box-sizing: border-box;

	border: 1px solid #ccc;

	border-radius: 8px;

	font-size: 16px;

	margin-bottom: 10px;

}


/**
 * 再開フォームのボタン
 */

#gg-resume-form button{

	width: 100%;

	padding: 12px;

	border: none;

	border-radius: 8px;

	background: #2a9d8f;

	color: #ffffff;

	font-size: 15px;

	font-weight: bold;

	cursor: pointer;

}

#gotouchi-go{
	max-width:1200px;
	margin:40px auto;
}

.gg-header{
	text-align:center;
	margin-bottom:20px;
}

#gg-map{

    width:100%;

    height:700px;

    border-radius:15px;

    overflow:hidden;

    border:4px solid #ddd;

}

#gg-status{

	margin-top:15px;

	padding:12px;

	background:#fff8dc;

	border-radius:6px;

	font-weight:bold;

	text-align:center;

}
/* =================================================
   ご当地MAPでGO
   GOボタン
================================================= */
.gg-ready{

	text-align:center;

}


.gg-ready p{

	font-size:18px;

	font-weight:bold;

	color:#ff5722;

	margin-bottom:10px;

}
.gg-go-button {

	display:block;

	width:180px;

	margin:20px auto 10px;

	padding:14px 30px;


	border:none;

	border-radius:50px;


	background:
	linear-gradient(
		135deg,
		#ff9800,
		#ff5722
	);


	color:#fff;


	font-size:22px;

	font-weight:bold;


	letter-spacing:2px;


	cursor:pointer;


	box-shadow:

	0 5px 15px rgba(0,0,0,0.25);


	transition:.3s;


}


/* hover */

.gg-go-button:hover {


	transform:

	translateY(-3px);


	box-shadow:

	0 8px 20px rgba(0,0,0,0.35);


}


/* 押した瞬間 */

.gg-go-button:active {


	transform:

	scale(.95);


}
/* ===========================
   クイズポップアップ
=========================== */

/* =================================
   ご当地MAPでGO
   4択クイズ
================================= */

/* クイズ全体 */
#gg-quiz-overlay {

	position: fixed;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.75);

	z-index: 99999;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 20px;

	box-sizing: border-box;

}


/* クイズボックス */
#gg-quiz-box {

	width: 100%;

	max-width: 520px;

	background: #ffffff;

	border-radius: 16px;

	padding: 25px 20px 20px;

	box-sizing: border-box;

	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

	text-align: center;

}


/* キャラクター名 */
.gg-quiz-character {

	font-size: 15px;

	color: #777;

	margin-bottom: 8px;

}


/* クイズタイトル */
#gg-quiz-box h2 {

	font-size: 24px;

	margin: 0 0 20px;

	font-weight: bold;

	color: #333;

}


/* 問題文 */
.gg-question {

	font-size: 20px;

	font-weight: bold;

	line-height: 1.6;

	margin: 0 0 25px;

	color: #222;

}


/* 選択肢エリア */
.gg-answer-area {

	display: flex;

	flex-direction: column;

	gap: 12px;

}


/* 選択肢ボタン */
.gg-answer-area button {

	width: 100%;

	padding: 15px 18px;

	border: 2px solid #ddd;

	border-radius: 10px;

	background: #fff;

	font-size: 16px;

	text-align: left;

	cursor: pointer;

	transition: all 0.2s ease;

}


/* マウスを乗せたとき */
.gg-answer-area button:hover {

	background: #f5f5f5;

	border-color: #999;

}


/* スマホで押したとき */
.gg-answer-area button:active {

	transform: scale(0.98);

}


/* フッター */
.gg-quiz-footer {

	margin-top: 20px;

}


/* 閉じるボタン */
.gg-quiz-footer button {

	padding: 10px 25px;

	border: none;

	border-radius: 20px;

	background: #777;

	color: #fff;

	font-size: 14px;

	cursor: pointer;

}


/* スマホ */
@media (max-width: 600px) {

	#gg-quiz-box {

		padding: 22px 15px 18px;

	}


	#gg-quiz-box h2 {

		font-size: 22px;

	}


	.gg-question {

		font-size: 18px;

	}


	.gg-answer-area button {

		font-size: 15px;

		padding: 14px;

	}

}

/**
 * ==========================================================
 * ご当地MAPでGO
 * camera.css
 * ----------------------------------------------------------
 * カメラ画面
 * Ver 1.0
 * ==========================================================
 */

/* ===========================
   全画面
=========================== */

#gg-camera-overlay{

	position:fixed;

	left:0;
	top:0;

	width:100%;
	height:100%;

	background:#000;

	z-index:999999;

	overflow:hidden;

}

/* ===========================
   カメラエリア
=========================== */

#gg-camera-box{

	position:relative;

	width:100%;
	height:100%;

}

/* ===========================
   カメラ映像
=========================== */

#gg-camera-video{

	position:absolute;

	left:0;
	top:0;

	width:100%;
	height:100%;

	object-fit:cover;

}

/* ===========================
   キャラクター
=========================== */

#gg-character-image{

	position:absolute;

	left:50%;
	top:50%;

	transform:translate(-50%,-50%);

	width:220px;

	max-width:55vw;

	max-height:70vh;

	object-fit:contain;

	cursor:pointer;

	z-index:100;

	animation:ggFloat 2s ease-in-out infinite;

}
/* ===========================
   下部ボタン
=========================== */

.gg-camera-footer{

	position:absolute;

	left:0;

	bottom:20px;

	width:100%;

	display:flex;

	justify-content:center;

	gap:15px;

	z-index:200;

}

/* ===========================
   ボタン
=========================== */

.gg-camera-footer button{

	padding:14px 28px;

	font-size:18px;

	font-weight:bold;

	border:none;

	border-radius:12px;

	cursor:pointer;

	color:#fff;

	background:#2196F3;

	box-shadow:0 5px 15px rgba(0,0,0,.35);

}

.gg-camera-footer button:hover{

	background:#1976D2;

}

/* 閉じるボタン */

.gg-camera-footer button:last-child{

	background:#777;

}

.gg-camera-footer button:last-child:hover{

	background:#555;

}

/* ===========================
   キャラクター浮遊
=========================== */

@keyframes ggFloat{

	0%{

		transform:
		translate(-50%,-50%)
		translateY(0);

	}

	50%{

		transform:
		translate(-50%,-50%)
		translateY(-15px);

	}

	100%{

		transform:
		translate(-50%,-50%)
		translateY(0);

	}

}

/* ===========================
   スマホ
=========================== */

@media(max-width:768px){

	#gg-character-image{

		width:180px;

		max-width:65vw;

	}

	.gg-camera-footer{

		flex-direction:column;

		align-items:center;

		bottom:30px;

	}

	.gg-camera-footer button{

		width:85%;

		font-size:20px;

		padding:16px;

	}

}
/* ===========================
   切り替えボタン
=========================== */
.gg-get-button{

	width:100%;
	padding:14px;

	background:#43A047;

	color:#fff;

	font-size:18px;

	font-weight:bold;

	border:none;

	border-radius:10px;

	cursor:default;

}


/* 共通ボタン */

.gg-header{

	padding:20px;

	text-align:center;

	background:#fff;

}


.gg-header h2{

	margin:0 0 10px;

	font-size:24px;

}


.gg-header p{

	margin:0 0 15px;

	color:#666;

}

/* =================================
   ご当地GO 吹き出し調整
================================= */


/* Google Maps 吹き出し本体 */
.gm-style .gm-style-iw {

	padding: 0 !important;

	max-width: 280px !important;

	overflow-x: hidden !important;

	box-sizing: border-box !important;

}


/* Google Maps 吹き出し内部 */
.gm-style .gm-style-iw-d {

	overflow-x: hidden !important;

	overflow-y: auto !important;

	max-width: 280px !important;

	box-sizing: border-box !important;

}


/* ご当地GO ポップアップ */
.gg-popup {

	width: 280px !important;

	max-width: 280px !important;

	padding: 12px !important;

	box-sizing: border-box !important;

	overflow-x: hidden !important;

	overflow-wrap: break-word !important;

	word-break: break-word !important;

	font-family:

		"メイリオ",

		"Meiryo",

		sans-serif !important;

	letter-spacing: 0 !important;

	line-height: 1.5 !important;

}


/* キャラクター画像 */
.gg-popup-image {

	display: block !important;

	width: 120px !important;

	max-width: 100% !important;

	height: 150px !important;

	object-fit: contain !important;

	margin: 0 auto 10px !important;

}


/* キャラクター名 */
.gg-popup h3 {

	width: 100% !important;

	max-width: 100% !important;

	box-sizing: border-box !important;

	font-size: 18px !important;

	line-height: 1.4 !important;

	letter-spacing: 0 !important;

	margin: 8px 0 !important;

	padding: 0 !important;

	overflow-wrap: break-word !important;

	word-break: break-word !important;

}


/* テーマ側の見出し装飾を解除 */
.gg-popup h3::before,

.gg-popup h3::after {

	display: none !important;

	content: none !important;

}


/* 説明文 */
.gg-popup p {

	width: 100% !important;

	max-width: 100% !important;

	box-sizing: border-box !important;

	font-size: 14px !important;

	line-height: 1.6 !important;

	letter-spacing: 0 !important;

	margin: 8px 0 !important;

	overflow-wrap: break-word !important;

	word-break: break-word !important;

}


/* GOボタン */
.gg-popup button {

	max-width: 100% !important;

	box-sizing: border-box !important;

}


/* 長いURLや英数字対策 */
.gg-popup a,

.gg-popup span {

	max-width: 100% !important;

	overflow-wrap: break-word !important;

	word-break: break-word !important;

}
/* =================================
   発見メッセージ
================================= */

.gg-ready {

	margin-top:15px;

	padding:10px;

	background:#fff3e0;

	border-radius:12px;

}


/* 発見しました */

.gg-ready p {

	margin:0 0 10px !important;

	text-align:center;

	font-size:18px !important;

	font-weight:bold;

	color:#ff5722;

	letter-spacing:0 !important;

	line-height:1.4 !important;

}
/* ボタン */

.gg-map-buttons{

	display:flex;

	justify-content:center;

	gap:8px;

	margin-top:10px;

}


.gg-map-buttons button{

	padding:5px 10px;

	border:none;

	border-radius:20px;

	font-size:13px;

	font-weight:bold;

	color:#fff;

	background:#ff9800;

}


#gg-current-map{

	background:#2196f3;

}

/* 現在地 */

#gg-current-map{

	background:linear-gradient(
		135deg,
		#4facfe,
		#007bff
	);

}
/* =========================
   図鑑ボタン
========================= */

.gg-book-open{

	position:fixed;

	bottom:15px;

	left:50%;

	transform:translateX(-50%);

	width:220px;

	padding:12px;

	border:none;

	border-radius:30px;

	background:#ff9800;

	color:white;

	font-size:16px;

	font-weight:bold;

	z-index:9999;

	box-shadow:0 5px 15px rgba(0,0,0,.3);

}
/**
 * 現在地マーカー
 */
.gg-current-position-marker {

    background:

        transparent;

    border:

        none;

}


/**
 * 現在地人物アイコン
 */
.gg-current-person {

    width:

        40px;

    height:

        40px;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    font-size:

        30px;

    filter:

        drop-shadow(

            0 2px 3px

            rgba(

                0,

                0,

                0,

                0.5

            )

        );

}


/**
 * 現在地吹き出し
 */
.gg-current-popup {

    padding:

        5px;

    font-size:

        14px;

}